<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus recusandae explicabo placeat consectetur ut vitae vero iste nostrum officiis non. Sit, nisi beatae omnis eaque quod error a et soluta.</p>
		<div style="width: 100px; height: 100px; background: #000;"></div>
		<span>文本</span>
		<br />
		<input type="button" value="按钮2">
		<input type="text">
		<script>
			/*   javaScript：基础语法+*DOM（）页面+BOM（浏览器）
			     JQuery操作DOM方式【7方式，36个函数】---改变页面效果
			     1.元素内容操作：操作元素和元素内容的方式【3个函数】
			       .html()
			       .val()
			       .text()
			     2.元素属性操作:操作元素的属性【固定属性、附加属性】【4个函数】
			       .attr()
			       .removeAttr()
			       .prop()
			      .removeProp()
			     3.元素类名操作：【4个函数】
			     addClass()
			     removeClass()
			     toggleClass()
			     hasClass()
			     4.元素样式【尺寸】操作：【5个函数】
			     css()
			     width()和height()
			     outerWidth()和outerHeight()
			     5.元素删除和插入操作：【7个函数】
			     append()和prepend()
			     after()和before()
			     remove()和empty()
			     replaceWith()
			     6.元素遍历操作：【6个函数】
			     children()和parent()
			     siblings()
			     next()和prev()
			     each()
			     7.动画操作：【7个函数】
			     show()和hide()
			     slideDown()和slideUp()
			     fadeIn()和fadeOut()
			     hover()
				 
				 BOM  浏览器对象模型：学习7个对象的方法使用
				 吸顶灯效果
			 */
			$("input[type='button']").click(function(){
				$("input[type='text']").val("文本框输出效果");
			});
			
			
			$("div").mouseenter(function(){
				$("span").html("<a href='#'>超文本</a>");
			});
			
			/*JQuery操作DOM：通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数：增加一个元素，覆盖原来的html
			.val函数  ：input元素使用，改变修改表单元素中文本
			*/
			$('button').click(function(){
				//DOM操作---改变页面其他元素
				//DOM操作--改变p元素改成marquee元素
				$('p').html("<marquee>跑马灯........</marquee>");
			});
			/* 100*100框，div 鼠标移动上去， 文本改成 超文本
			        按钮和输入框，点击按钮，输入框输出文字效果
			*/
		</script>
	</body>
</html>